<template>
	<view >

    <z-nav-bar id="nav" bgColor="#ffffff" title="生成海报"></z-nav-bar>

		<view class="poster-pic">
			<view class="close flex-aj-center">
				<image src="http://www.xvopen.com/xiaoV/img1/close.png" mode=""></image>
			</view>
			<image :src="posterUrl"></image>
		</view>

		<view class="share flex-center-between">
			<view class="pic" @tap="toSave">
				<view>
					<image src="/static/logo.png" mode=""></image>
				</view>
				下载图片
			</view>
			<view class="weixin">
				<view>
					<image src="/static/logo.png" mode=""></image>
				</view>
				微信好友
			</view>
			<view class="circle-fds">
				<view>
					<image src="/static/logo.png" mode=""></image>
				</view>
				微信朋友圈
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import {ref} from "vue";

//-----------------------------------data------------------

	let posterUrl = ref('http://www.xvopen.com/xiaoV/img1/fxapp.png')

//---------------------------------------onload------------

	onLoad((e)=>{
		console.log(e,'e')

	})

//-----------------------------------function--------------

	function save() {
			console.log('url:',posterUrl.value);
			uni.getImageInfo({
				src: posterUrl.value,
				success: function(image) {
					console.log('图片信息：', JSON.stringify(image));
					uni.saveImageToPhotosAlbum({
						filePath: image.path,
						success: function() {
							console.log('save success');
							uni.showToast({
								title: '图片保存成功',
								icon: 'none',
								duration: 2200
							});
						}
					});
				}
			});
		}
		function toSave() {
			uni.showModal({
				title: '图片保存',
				content: '确定要保存图片吗',
				success: e => {
					console.log(e)
					if (e['confirm']) {
						save();
					}
				}
			});
		}


</script>

<style>
	page{
		background-color: rgba(0, 0, 0, 0.2);
		height: 100%;
	}
</style>
<style lang="scss">
	.poster-pic{
		width: 32vh;
		height: 56vh;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 16%;
		position: relative;
		.close{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: -42rpx;
			right: -26rpx;
			border: 1rpx solid #444;
			border-radius: 50%;
			image{
				width: 12.5rpx;
				height: 12.5rpx;
			}
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
	.share{
		width: 750rpx;
		height: 261rpx;
		border-radius: 16rpx 16rpx 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 0 108rpx;
		.pic,.weixin,.circle-fds{
			view{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #EDEDED;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;
				image{
					width: 56rpx;
					height: 56rpx;
				}
			}
			font-size: 24rpx;
			color: #444;
		}
	}
</style>
